<template>
    <div class="app-container">
      <div>
        <el-steps :active="active" align-center finish-status="success">
            <el-step title="重要知识点"></el-step>
            <el-step title="语法"></el-step>
            <el-step title="单词"></el-step>
            <el-step title="作业"></el-step>
        </el-steps>
      </div>
      <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;">
        <h3>日期：{{ formData.taskDate }} <span style="margin-left: 20px;">班级：{{ formData.className }}</span></h3>
      </div>
      <!--重要知识点-->
      <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;" v-show="active==0">
        <quill-editor style="height: 300px;"
          v-model="formData.knowledgePoints"
          ref="knowledgePoints"
          :options="editorOption"
        >
        </quill-editor>
        <!-- <el-input 
            type="textarea"
            :rows="10"
            placeholder="请输入当天授课的重要知识点内容"
            v-model="formData.knowledgePoints">
        </el-input> -->
      </div>
      <!--语法-->
      <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;" v-show="active==1">
        <quill-editor style="height: 300px;"
          v-model="formData.syntax"
          ref="syntax"
          :options="editorOption"
        >
        </quill-editor>
        
      </div>
      <!--单词-->
      <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;" v-show="active==2">
        <quill-editor style="height: 300px;"
          v-model="formData.word"
          ref="word"
          :options="editorOption"
        >
        </quill-editor>
        
      </div>
      <!--作业-->
      <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;" v-show="active==3">
        <quill-editor style="height: 300px;"
          v-model="formData.schoolAsignment"
          ref="schoolAsignment"
          :options="editorOption"
        >
        </quill-editor>
        
      </div>
      <!--知识点/语法/单词背诵情况-->
      <!-- <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;" v-show="active==3">
        <el-table :data="formData.reciteStudentList" prop="examStudents" height="450" :span-method="arraySpanMethod" border>
            <el-table-column label="编号" align="center" prop="studentId" />
            <el-table-column
              label="学生姓名"
              align="center"
              prop="studentName"
            />
            <el-table-column label="背诵内容" align="center" prop="isPass">
              <template slot-scope="scope">
                <el-tag type="">{{ getDictLabel(scope.row.reciteType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="是否通过" align="center" prop="isPass">
              <template slot-scope="scope">
                <el-radio v-model="scope.row.checkState" label="0">不通过</el-radio>
                <el-radio v-model="scope.row.checkState" label="1">通过</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remarks">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remarks"
                  placeholder="备注"
                ></el-input>
              </template>
            </el-table-column>
      </el-table>
      </div> -->
      <!--课后作业检查情况-->
      <!-- <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;" v-show="active==4">
        <el-table :data="formData.workStudentList"  height="450">
            <el-table-column label="编号" align="center" prop="studentId" />
            <el-table-column
              label="学生姓名"
              align="center"
              prop="studentName"
            />
            <el-table-column label="是否完成" align="center" >
              <template slot-scope="scope">
                <el-radio v-model="scope.row.checkState" label="0">未完成</el-radio>
                <el-radio v-model="scope.row.checkState" label="1">完成</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remarks">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remarks"
                  placeholder="备注"
                ></el-input>
              </template>
            </el-table-column>
        </el-table>
      </div> -->
      <div style="text-align: center; margin-top: 80px;">
        <el-button style="margin-top: 12px;" @click="up" v-if="active>0">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="submitUpdate" v-loading.fullscreen.lock="loading">保  存</el-button>
        <el-button style="margin-top: 12px;" @click="next" v-if="active<3">下一步</el-button>
      </div>
    </div>
  </template>
  
  <script>

import {quillEditor} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {checkStudentList, workDayDetail, updateWorkDayDetail} from "@/api/evaluation/day"
  export default {
    name: "dayEdit",
    components: {quillEditor},
    props: {
      wordId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        active: 0,
        studentList:[],
        textarea:null,
        formData:{
          id:null,
          reciteStudentList:[],
          workStudentList:[],
          workTypeDictList:[],
          knowledgePoints:'',
          syntax:'',
          word:'',
          className:''
        },
        loading:false,
        // 编辑器配置
      editorOption: {
        placeholder: '在这里输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //  加粗、倾斜、下划线、删除线
            ['blockquote', 'code-block'],// 引用代码块
            [{'header': 1}, {'header': 2}], // 标题，键值对应的形式，1，2 表示字体大小
            [{'list': 'ordered'}, {'list': 'bullet'}], // 列表
            [{'script': 'sub'}, {'script': 'super'}], // 上下标
            [{'indent': -1}, {'indent': +1}], // 缩进
            [{'direction': 'rtl'}], // 文本方向
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            [{'header': [1, 2, 3, 4, 5, 6, false]}], // 几级标题
            [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
            [{'font': []}], // 字体
            [{'align': []}], // 对齐方式
            ['clean'], //清除
            ['image', 'video'], // 上传图片、上传视频
          ]
        }
      },
        
      };
    },
    computed: {
      
    },
    created() {
      // const id = this.$route.query.id
      const id = this.wordId
        this.getDicts("work_type").then(response => {
            this.workTypeDictList = response.data;
            //背诵学生列表
            //this.searchStudent(id,1)
            //作业检查学生列表
            //this.searchStudent(id,2)
            workDayDetail({id:id}).then(resp=>{
              this.formData.id = resp.data.id
              // this.formData.reciteStudentList = resp.data.reciteStudentList
              // this.formData.workStudentList = resp.data.workStudentList
              this.formData.className = resp.data.className
              this.formData.knowledgePoints = resp.data.knowledgePoints
              this.formData.syntax = resp.data.syntax
              this.formData.word = resp.data.word
              this.formData.schoolAsignment = resp.data.schoolAsignment
              this.formData.taskDate = resp.data.taskDate

            })
        });
    },
    mounted(){
      
    },
    beforeunload(){
      this.reciteStudentList = []
      this.workStudentList = []
      this.className = ''
    },
    methods: {
      submitUpdate(){
        this.loading=true
        updateWorkDayDetail(this.formData).then(resp=>{
          if(resp.code==200){
            this.msgSuccess("操作成功")
            this.$emit('handleClose')
          }
          this.loading=false
        })
      },
        arraySpanMethod({ row, column, rowIndex, columnIndex }){
            if (columnIndex === 1 || columnIndex === 0) {
                if (rowIndex % 3 === 0) {
                    return {
                    rowspan: 3,
                    colspan: 1
                    };
                } else {
                    return {
                    rowspan: 0,
                    colspan: 0
                    };
                }
            }
            },
        getDictLabel(key){
            const list = this.workTypeDictList
            for(let i=0;i<list.length;i++){
                if(key==list[i].dictValue){
                    console.log(list[i].dictLabel)
                    return list[i].dictLabel
                }
            }
            
        },
        /**查询学生列表 */
        searchStudent(id,checkType){
            checkStudentList({checkType:checkType,workDayId:id}).then(resp=>{
                if(checkType==1){
                    this.reciteStudentList=resp.data
                }
                if(checkType==2){
                    this.workStudentList=resp.data
                }
                
            })
            // queryClassStudents({ classId: id }).then((resp) => {
            //     for (let i = 0; i < resp.data.length; i++) {
            //     this.studentList.push({
            //         score: "0",
            //         isPass: "0",
            //         studentNo: resp.data[i].studentNo,
            //         classId: resp.data[i].classId,
            //         studentName: resp.data[i].studentName,
            //     });
            //     }
            // });
        },
        up(){
            this.active--
        },
        next(){
            if (this.active++ > 3) this.active = 0;
        }
    }
  };
  </script>
  